<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="author" content="100200cs"/>
    <title>用户注册</title>

    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>

</head>
<body style="touch-action: none;background-color: #f8f8f8">
<script src="https://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>


<div class="weui-cells__title"></div>

<form id="form_1">
    <div class="weui-cells__title">以下内容必填</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">账 号</label></div>
            <div class="weui-cell__bd weui-cell_primary"><input type="text" name="tel" id="tel" class="weui-input" placeholder="请输入账号"/></div>

        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">密 码</label></div>
            <div class="weui-cell__bd weui-cell_primary"><input type="password" name="pwd" id="pwd" class="weui-input" placeholder="请输入密码"/></div>

        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">密码确认</label></div>
            <div class="weui-cell__bd weui-cell_primary"><input type="password" name="pwd" id="pwd2" class="weui-input" placeholder="请确认密码"/></div>

        </div>
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
            <div class="weui-cell__bd weui-cell_primary"><input id="vcode" name="vcode" type="number" class="weui-input"></div>
            <div class="weui-cell__ft"><img id="verify_img" src="{:captcha_src()}" onclick="refreshVerify()"/></div>
        </div>
    </div>
    <div class="weui-cells__tips"></div>


</form>

<label for="agree" class="weui-agree">
    <input id="agree" type="checkbox" class="weui-agree__checkbox" onchange="changeState(this)"/>
    <script>
        function changeState (ele) {
            if(ele.checked){
                ele.removeAttribute('checked')
                console.log('选中')
            } else {
                ele.setAttribute('checked','checked')
                console.log('未选中')
            }
        }
    </script>
    <span class="weui-agree__text">
                阅读并同意<a href="javascript:;">《免责声明》</a>
            </span>
</label>

<form id="form_2">
    <div class="weui-cells__title">以下内容可以不填</div>

    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
            <div class="weui-cell__bd weui-cell_primary">
                <input type="text" name="mobile" id="mobile" class="weui-input" />
            </div>

        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">性 别</label></div>
            <div class="weui-cell__bd weui-cell_primary">
                <input type="text" name="sex" id="sex" class="weui-input" />
                <script>
                    $("#sex").picker({
                        title: "请选择您的性别",
                        cols: [
                            {
                                textAlign: 'center',
                                values: ['男','女','保密']
                            }
                        ]
                    });
                </script>
            </div>

        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">生 日</label></div>
            <div class="weui-cell__bd weui-cell_primary">
                <input type="text" name="birth" id="birth" class="weui-input" />
                <script>
                    $("#birth").calendar({
                        dateFormat:'yyyy年mm月dd日',
                        maxDate:'2017-12-30',
                        minDate:'1900-1-1',


                    });
                </script>
            </div>

        </div>


    </div>
    <div class="weui-cells__tips"></div>


</form>

<div class="weui-btn-area">
    <a href="javascript:submit();" class="weui-btn weui-btn_primary">确认注册</a>
</div>




<script type="text/javascript">


    var tel_right=false;
    var pwd_right=false;
    var vali_right=false;
    function refreshVerify() {

        $('#verify_img').attr("src", "/captcha");
    }

</script>


<script type="text/javascript">

    //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
    $("#form_1 :input").each(function () {
        //创建元素
        var $required = $("<span class='weui-msg__desc' style='color:red;'>*</span>");
        //将它追加到文档中
        if($(this).is("#tel") || $(this).is("#pwd") ||$(this).is("#pwd2")){
            $(this).parent().parent().append($required);
        }
    });

    var vali_tel=function(thiz){

        var $parent = $(thiz).parent().parent();

        $parent.find(".weui-msg__desc").remove();
        tel_right=false;
        if(thiz.value.length <4){
            var errorMsg = " 不能少于4位！";
            $parent.append("<span class='weui-msg__desc' style='color:red;'>" + errorMsg + "</span>");
        }else if(thiz.value.length>16){
            var errorMsg = " 不能多于16位！";
            $parent.append("<span class='weui-msg__desc' style='color:red;'>" + errorMsg + "</span>");
        }
        else if( !/^[A-Za-z0-9]+$/.test(thiz.value)){
            var errorMsg = " 仅限字母和数字！";
            $parent.append("<span class='weui-msg__desc' style='color:red;'>" + errorMsg + "</span>");
        }
        else{
            var okMsg=" 格式正确";
            $parent.find(".weui-msg__desc").remove();
            $parent.append("<span class='weui-msg__desc' style='color:green;'>" + okMsg + "</span>");
            tel_right=true;
        }
        return tel_right;

    }
    var vali_pwd=function(thiz){

        var $parent = $(thiz).parent().parent();

        $parent.find(".weui-msg__desc").remove();
        pwd_right=false;
        if(thiz.value.length <6){
            var errorMsg = " 不能少于6位！";
            $parent.append("<span class='weui-msg__desc' style='color:red;'>" + errorMsg + "</span>");
        }else if(thiz.value.length>20){
            var errorMsg = " 不能多于20位！";
            $parent.append("<span class='weui-msg__desc' style='color:red;'>" + errorMsg + "</span>");
        }
        else if( !/^[A-Za-z0-9]+$/.test(thiz.value)){
            var errorMsg = " 仅限字母和数字！";
            $parent.append("<span class='weui-msg__desc' style='color:red;'>" + errorMsg + "</span>");
        }
        else{
            var okMsg=" 格式正确";
            $parent.find(".weui-msg__desc").remove();
            $parent.append("<span class='weui-msg__desc' style='color:green;'>" + okMsg + "</span>");
            pwd_right=true;
        }
        return pwd_right;

    }
    var vali_same=function(thiz){
        var pwd1=$("#pwd").val();
        var $parent = $(thiz).parent().parent();

        $parent.find(".weui-msg__desc").remove();
        pwd_right=false;
        if(thiz.value!=pwd1){
            var errorMsg = " 两次密码不一致！";
            $parent.append("<span class='weui-msg__desc' style='color:red;'>" + errorMsg + "</span>");
        }else{
            var okMsg=" 格式正确";
            $parent.find(".weui-msg__desc").remove();
            $parent.append("<span class='weui-msg__desc' style='color:green;'>" + okMsg + "</span>");
            pwd_right=true;
        }
        return pwd_right;
    };

    $("#form_1 :input").blur(function(){
        console.log(""+$("#agree").val());
        //验证名称
        if($(this).is("#tel")) {
            vali_tel(this);
        }
        //验证邮箱
        if($(this).is("#pwd")) {
            vali_pwd(this);
        }
        if($(this).is("#pwd2")) {
            if(vali_pwd(this))
                vali_same(this);

        }
    });

    function submit() {
        vali_tel($("#tel").get(0));
        vali_pwd($("#pwd").get(0));
        if(vali_pwd($("#pwd2").get(0)))
            vali_same($("#pwd2").get(0));



        if(tel_right && pwd_right) {
            if(!$("#agree").get(0).checked){
                $.toast("请您同意<br>《免责声明》！", "forbidden");
                return;
            }
            $.ajax({
                    url: 'sign',//url
                    data: {vcode: $("#vcode").val(),
                            tel:$("#tel").val(),
                            pwd:md5($("#pwd").val()),
                            sex:$("#sex").val(),
                            mobile:$("#mobile").val(),
                            birth:$("#birth").val(),
                          },
                    type: 'POST',// 'POST' or 'GET'
                    dataType: 'json',//'json' or 'text' or 'html'
                    timeout: 2000,//超时时间

                    error:function(){
                        $.toast("网络不通<br>稍后重试", "cancel");
                    },

                    success: function (data) {
                        if (data['vcode']) {
                            if(data['tel']){

                                $.toast("注册成功<br>即将返回", function() {
                                    console.log("ok");
                                    $.cookie('the_tel',$("#tel").val() , { expires: 7 });
                                    $.cookie('the_pwd',$("#pwd").val() , { expires: 7 });
                                    window.location.href="{$URL}";

                                });

                            }else{
                                $.toast("账号已存在！", "forbidden");
                            }
                        }else{
                            $.toast("验证码错误！", "forbidden");
                            refreshVerify();
                        }
                    }
                }
            )
        }
        else{
            $.toast("账号或密码<br>" +
                "格式错误！", "forbidden");
        }
    }

</script>
</body>
</html>